<template>
  <div class="show">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="@/assets/img/variety/3-1.webp" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block" style="color:rgb(177, 63, 82)">
        <h3>我的小尾巴</h3>
        <p>苏能静张亮聊兄妹趣事</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="@/assets/img/variety/3-2.webp" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block" style="color:blue">
        <h3>春日必看综艺大播放</h3>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="@/assets/img/variety/3-3.webp" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block" style="color:blue">
        <h3>喜剧新生活</h3>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
  </div>
</template>

<script>
export default {
  name:'SildeShowVariety'
}
</script>

<style scoped>
.show{
    width: 100%;
    height: 600px;
    }
  .carousel-item img{
    width: 100%;
    height: 600px;
    }
</style>